<template>
  <div>
    <v-speed-dial fixed bottom left id="upload-picture-btn">
      <template v-slot:activator>
        <v-btn class="primary" dark fab @click="onActivatorClick">
          <v-icon>
            mdi-upload
          </v-icon>
        </v-btn>
      </template>
    </v-speed-dial>
    <v-dialog v-model="dialog" max-width="400">
      <v-card>
        <v-card-title
          class="text-h6 primary justify-center"
          id="upload-picture-dialog-head"
        >
          上传图片
        </v-card-title>

        <v-card-text>
          <br />
          <v-row justify="center" class="mb-2">
            <v-hover :open-delay="imgHoverOpenDelay">
              <template v-slot:default="{ hover }">
                <v-img
                  width="300"
                  max-width="300"
                  class="grey lighten-2"
                  :aspect-ratio="16 / 9"
                  :src="pictureModel.Image"
                  contain
                >
                  <v-fade-transition>
                    <v-overlay v-if="hover" absolute>
                      <v-btn class="info lighten-2" @click="onUploadClick">
                        <v-icon>mdi-plus</v-icon>
                      </v-btn>
                    </v-overlay>
                  </v-fade-transition>
                </v-img>
              </template>
            </v-hover>
            <input
              type="file"
              v-show="false"
              ref="fileInput"
              @change="onPictureSelected"
            />
          </v-row>

          <v-row justify="center">
            <v-col cols="12">
              <v-text-field v-model="pictureModel.Tags" label="标签">
              </v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field v-model="pictureModel.Description" label="描述">
              </v-text-field>
            </v-col>
          </v-row>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn class="success mr-3" @click="onSaveClick">
            保存
          </v-btn>
          <v-btn @click="closeDialog">
            取消
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { IPictureModel, PictureModel } from "@/Model/PictureModel";
import { PicturePriview } from "@/Service/PicturePriview";

@Component({})
export default class UploadBtn extends Vue {
  // region Prop
  // endregion
  // region Data
  private dialog = false;
  private pictureModel: IPictureModel = new PictureModel();
  private readonly picturePreview = new PicturePriview();
  // endregion
  // region computed
  private get imgHoverOpenDelay(): number {
    if (this.pictureModel.Image.length !== 0) {
      return 1000;
    } else {
      return 0;
    }
  }
  // endregion
  // region watch
  // endregion
  // region method
  onActivatorClick() {
    this.dialog = true;
  }

  onUploadClick() {
    this.$refs.fileInput.click();
  }

  onPictureSelected() {
    if (this.$refs.fileInput.files?.length !== 0) {
      this.picturePreview
        .Preview(this.$refs.fileInput.files)
        .then((value: IPictureModel) => {
          this.pictureModel.Image = value.Image;
          this.pictureModel.Name = value.Name;
        });
    } else {
      console.log("没有选择文件");
    }
  }

  onSaveClick() {
    this.dialog = false;
    this.pictureModel.Id = Date.now().toString();
    this.$emit("save", this.pictureModel);
    setTimeout(this.clearPicture, 500);
  }

  clearPicture() {
    this.pictureModel = new PictureModel();
  }

  closeDialog() {
    this.dialog = false;
  }
  // endregion
  // region hook
  // endregion

  $refs!: {
    fileInput: HTMLInputElement;
  };
}
</script>

<style lang="scss">
//#upload-picture-btn {
//  //position: absolute;
//}

#upload-picture-dialog-head {
  color: white;
}
</style>
